<script lang="ts" setup>

import {onMounted, reactive, ref} from "vue";
import {message} from "ant-design-vue";
import {useRouter} from "vue-router";
import {deleteReportAPI, pageQueryReportAPI} from "@/apis/report.ts";
import {useInfoStore} from "@/store/user/user.ts";

const userStore = useInfoStore().userInfo;
//分页查询岗位和企业信息
const count = 8;
const pageCurrent = ref(1);
const pageTotal = ref(0);
const initLoading = ref(true);
const loading = ref(false);
// const data = <any>reactive([]);
const list = <any>reactive([]);
const reportPageDate = <any>ref({
  reportCheckStatus: '',
  reportObject: '',
  pageCurrent: pageCurrent.value,
  pageSize: count,
  reportUserId: userStore.userId, //举报人id
});

const getReportList = async (reportPageDate: any) => {
  const res = await pageQueryReportAPI(reportPageDate);
  if (res.data.flag) {
    pageTotal.value = res.data.data.total;
    list.push(...res.data.data.data)
    initLoading.value = false;
  } else {
    message.error(res.data.message)
  }
}

//生命周期
onMounted(() => {
  getReportList(reportPageDate.value);
});

const onLoadMore = () => {
  loading.value = true;
  initLoading.value = true;
  pageCurrent.value += 1;
  getReportList(reportPageDate.value).then(() => {
    loading.value = false;
  });
};

//查看/删除
const router = useRouter();
const goToJobAndEmployerDetail = (jobId: string) => {
  router.push({
    name: 'jobAndEmployerDetail',
    params: {
      jobId: jobId // 确保传递的参数为字符串类型
    }
  });
};
const deleteReport = (reportId: string, reportCheckStatus: string) => {
  if (reportCheckStatus === '审核中') {
    message.error("举报审核中，无法删除")
  } else {
    deleteReportAPI({
      reportId: reportId
    }).then(() => {
      message.success("删除成功")
      list.splice(0, list.length);
      getReportList(reportPageDate.value);
    })
  }

};

//筛选
const check = () => {
  list.splice(0, list.length);
  console.log("筛选了----" + reportPageDate.value)
  getReportList(reportPageDate.value);
}


</script>

<template>
  <div class="filter">
    <div class="top">
      <div style="display: flex;align-items: center;">
        <h4 style="margin-right: 10px;">
          举报类型 :
        </h4>

        <a-radio-group v-model:value="reportPageDate.reportObject" button-style="solid" @change="check">
          <a-radio-button value="">不限</a-radio-button>
          <a-radio-button value="投诉岗位">岗位</a-radio-button>
          <a-radio-button value="投诉企业">企业</a-radio-button>
        </a-radio-group>
      </div>
    </div>
    <div class="bottom">
      <div class="main-title">
        <h4>我 的 举 报</h4>
      </div>
      <div class="main-content">
        <a-list
            :data-source="list"
            :loading="initLoading"
            class="demo-loadmore-list"
            item-layout="horizontal"
        >
          <template #loadMore>
            <div
                v-if="!initLoading && !loading && list.length < pageTotal"
                :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }"
            >
              <a-button @click="onLoadMore">获取更多</a-button>
            </div>
          </template>
          <template #renderItem="{ item }">

            <a-list-item>
              <template #actions>
                <a-button danger ghost type="primary" @click="deleteReport(item.reportId,item.reportCheckStatus)">删除
                </a-button>
              </template>
              <a-skeleton :loading="!!item.loading" :title="false" active avatar>
                <a-list-item-meta
                    :description="'投诉原因：'+'&nbsp'+item.reportDescribe"
                >
                  <template #title>
                    状态: {{ item.reportCheckStatus }}
                  </template>
                </a-list-item-meta>
                <div style="border-radius: 10px;width: 180px;background-color: #EAF2FF;padding: 10px">
                  <div>
                    类型: {{ item.reportObject }}
                  </div>
                </div>
              </a-skeleton>
            </a-list-item>
          </template>
        </a-list>
      </div>


    </div>
  </div>

</template>

<style scoped>
.filter {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  height: 750px;
  width: 70%;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  margin: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  .top {
    box-sizing: border-box; /* 确保边框不会增加额外宽度 */
    width: 100%;
    height: 10%;
    padding-left: 30px;
    border-bottom: 1px solid #ccc;
  }

  .bottom {
    box-sizing: border-box; /* 确保边框不会增加额外宽度 */
    width: 100%;
    height: 90%;

    .main-title {
      width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }

    .main-content {
      width: 100%;
      flex-grow: 1;
      height: 90%;
      overflow: auto; /* 内容超出时自动显示滚动条 */
    }
  }
}

</style>
